<template>
    <div class="banner">
        <a  :href="go.titleHref" style="margin-left: 3.2%">
                <button @mouseenter="visible = true" @mouseleave="visible = false" style="border: 0px; background-color: #707070" class="title">
                    UpLearning
                </button>
                <div class="tip" v-show="visible">
                    <div class="tri"></div>
                 回到端页面
            </div>
        </a>
        <ul @click="chosen" ref="choices">
            <li>
                <a :href="go.userInformation">
                    <img :src="'data:image/png;base64,'+avatar" alt="图片无法显示" class="avatar">
                </a>
            </li>
            <li @click="quit">
                退出登录
            </li>
            <li>
                消息
            </li>
            <li @mouseover="languageShow=true" >
                语言
                <LanguageChoice :style="{opacity: languageShow?1:0}" @mouseover="languageShow=true" @mouseout="languageShow=false" />
            </li>
            <li>
                <a href="../../index.html#/home">主页</a>
            </li>
            <li>
                <a href="../../index.html#/about">关于</a>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref, defineExpose, onMounted, defineProps, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { getUserData, removeUserData } from '../utils';
import axios from 'axios'
const router = useRouter();

const visible = ref(false)

// 获得用户信息
// 获得用户信息
let userData = ref({
    Token: '',
    avatar: '',
    id: '',
    role: ''
})
if (getUserData() != undefined) {
    userData = getUserData();
}

// 得到头像
const avatar = ref();
axios({
    headers: {
    },
    method: 'get',
    url: 'http://api.linwine.space/api/sjk/static/avatar/'+userData.avatar,
    responseType: "arraybuffer",
}).then((data)=>{
    //将文件流转为64base
    avatar.value = btoa(new Uint8Array(data.data).reduce((data, byte)=>data+String.fromCharCode(byte), ""));
})

//跳转页面时的链接
const go = reactive({
    titleHref: '',
    userInformation: ''
})
//判断是什么身份
if (userData.Token != '') {
    if (userData.role == 1) {
        go.titleHref = '../../student.html#/subject_hall';
        go.userInformation = '../../student.html#/profiles';
    }
    else if (userData.role == 2) {
        go.titleHref = '../../teacher.html#/MyCourse';
        go.userInformation = '../../teacher.html#/PersonalData';
    }
    else if (userData.role == 3) {
        go.titleHref = '../../departmentHead.html#/ManageTeachers';
        go.userInformation = '../../teacher.html#/PersonalData';
    }
    else if (userData.role == 4) {
        go.titleHref = '';
        go.userInformation = '';
    }
    else if (userData.role == 5) {
        go.titleHref = '';
        go.userInformation = '';

    }
    else if (userData.role == 10) {
        go.titleHref = '../../super-administrator.html#/school_administrator';
        go.userInformation = '';
    }
}

//获取从父组件传来的当前是第几个页面
const props = defineProps({
    nowPage: Number
});
let pageInd = props.nowPage;

// 给被选中的页面选项添加样式
// 获取banner的ul
const choices = ref();
onMounted(() => {
    pageInd++;
    console.log(choices.value.children);
    if (1 <= pageInd && pageInd <= 5) {
        for (let i = 0; i < choices.value.children.length; i++) {
            choices.value.children[i].classList.remove('choseLi');
        }
        choices.value.children[pageInd].classList.add('choseLi');
    }
})

//语言切换
// 默认是中文
const language = ref(1);
const languageShow = ref(false)
defineExpose({
    language
})


//退出登录
const quit = function () {
    removeUserData();
    window.location.href = "../../index.html#/home";
    const currentPath = ref(window.location.hash)
    if (currentPath.value == '#/home')
        router.go(0);
}
</script>
<style scoped>
.banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    min-width: 660px;
    background-color: rgba(112, 112, 112);
    position: fixed;
    z-index: 100;
    color: white;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 500;
}

.banner ul {
    font-size: 17px;
    list-style: none;
    display: flex;
    flex-direction: row-reverse;
    justify-content: end;
    align-items: center;
    width: 50%;
    margin-right: 3%;
}

.banner li {
    float: right;
    display: inline;
    margin-right: 5%;
    cursor: pointer;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: normal;
    position: relative;
}

.banner li a {
    color: white;
    text-decoration:none;
}


.choseLi {
    border-bottom: 2px solid white;
    padding-bottom: 4px;
    box-sizing: content-box;
    margin-top: 0.85%;
}

.title {
    display: inline-block;
    margin-left: 4%;
    cursor: pointer;
    color: white;
    font-size: 20px;
}

.language {
    color: white;
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: normal;
    margin-top: 4.4px;
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #666;
    margin-top: 8px;
}
.tip{
    width: 130px;
    border-radius: 6px;
    height: 31px;
    background-color: #444;
    color: #fff;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    top: 50px;
}
.tri{
    position: fixed;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #444;
    top: 35px;
}
</style>